<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="gouser">
    <template #right>
      <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <van-tabs v-model:active="active">
    <van-tab v-for="item in tabs" :key="item.text" :title="item.text"></van-tab>
  </van-tabs>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell
      v-for="item in list"
      :key="item.orderId"
      @click="gotoorderdetail(item)"
    >
      <template #default>
        <div class="card_title">
          <p>订单时间{{ item.createTime }}</p>
          <p>{{ item.orderStatusString }}</p>
        </div>
        <van-card
          v-for="ele in item.newBeeMallOrderItemVOS"
          :key="ele.goodsId"
          :num="ele.goodsCount"
          :price="ele.sellingPrice"
          desc="全场包邮"
          :title="ele.goodsName"
          :thumb="ele.goodsCoverImg"
        />
      </template>
    </van-cell>
  </van-list>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { useRouter,useRoute } from "vue-router";
import { getmyorder } from "@/api/index.js";
let router = useRouter();
let route = useRoute();
let tabs = reactive([
  {
    text: "全部",
    status: "",
  },
  {
    text: "待付款",
    status: "0",
  },
  {
    text: "待确认",
    status: "1",
  },

  {
    text: "待发货",
    status: "2",
  },
  {
    text: "已发货",
    status: "3",
  },
  {
    text: "交易完成",
    status: "4",
  },
]);

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
let pageNumber = ref(1); //订单的页数
let status = ref(""); //订单的状态
let active = ref(0); //和tabs数据的index绑定

const onLoad = () => {
  getmyorder(pageNumber.value++, status.value).then((res) => {
    if (res.resultCode == 200) {
      if (res.data.list.length == 0) {
        finished.value = true;
      }
      // list.value = list.value.concat(res.data.list);
      res.data.list.forEach((element) => {
        list.value.push(element);
      });
      loading.value = false;
    }
  });
};
//点击返回
let gouser = () => {
  router.push("/user");
};
//点击订单去订单详情页面
let gotoorderdetail = (item) => {
  router.push("/orderdetail?id="+item.orderNo);
};
watch(active, (newval, oldval) => {
  status.value = tabs[newval].status;
  pageNumber.value = 1;
  finished.value = false;
  list.value = [];
  onLoad();
});
</script>
<style lang="less" scoped>
/deep/.van-cell {
  margin-top: 0.5rem;
  .van-cell__value {
    text-align: left;
  }
}
.card_title {
  display: flex;
  justify-content: space-between;
}
</style>
